<template>
  <div v-loading="loading" class="login-container">
    <el-form
      ref="formRef"
      :model="loginForm"
      :rules="rules"
      class="login-form"
      auto-complete="on"
      label-position="left"
    >
      <div class="title-container">
        <h3 class="title">{{ $t('login.title') }}</h3>
        <lang-select class="set-language" />
      </div>
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            登录系统
          </div>
        </template>
        <el-form-item prop="username">
          <span class="svg-container">
            <svg-icon icon-class="user" />
          </span>
          <el-input
            v-model="loginForm.username"
            size="large"
            prefix-icon="User"
            ref="username"
            placeholder="请输入用户名"
            name="username"
            type="text"
            tabindex="1"
            auto-complete="on"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            prefix-icon="Lock"
            ref="password"
            clearable
            placeholder="请输入密码"
            name="password"
            show-password
            tabindex="1"
            size="large"
            auto-complete="on"
          />
        </el-form-item>
        <el-row>
          <el-col :span="16">
            <el-form-item prop="verifyCode">
              <el-input
                v-model="loginForm.verifyCode"
                prefix-icon="Finished"
                @keyup.enter="submit"
                ref="captcha"
                placeholder="请输入验证码"
                name="verifyCode"
                type="text"
                size="large"
                tabindex="1"
                auto-complete="on"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-image
              @click="getCaptcha"
              :src="captchaImg"
              class="captcha-img cursorp"
            />
          </el-col>
        </el-row>
        <el-row class="mg-tp-10">
          <el-button
            @click="handleLogin()"
            size="large"
            type="primary"
            class="login-button"
          >
            登录
          </el-button>
        </el-row>

        <!--        <el-form-item style="float: left;width: 250px;" prop="username">-->
        <!--          <el-input-->
        <!--                  style="width: 270px"-->
        <!--                  size="large"-->
        <!--                  prefix-icon="Finished"-->
        <!--                  ref="username"-->
        <!--                  placeholder="请输入验证码"-->
        <!--                  name="username"-->
        <!--                  type="text"-->
        <!--                  tabindex="1"-->
        <!--                  auto-complete="on"-->
        <!--          />-->
        <!--        </el-form-item>-->
        <!--        <el-image @click="clickCaptcha()" :src="captchaImg" class="captcha-img cursorp" />-->
        <!--        <el-button :loading="loading" type="primary" class="login-button">登录</el-button>-->
      </el-card>
    </el-form>

    <div v-if="showCopyright == true" class="copyright">
      <p>{{ $t('login.copyright') }}</p>
      <p>{{ $t('login.icp') }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, toRefs, watch, nextTick } from 'vue';
import { buildUUID } from '../../utils/index'
import { FormInstance, FormRules, ElMessage  } from 'element-plus'
import { useUserStore } from '@/store/modules/user';
import { getCaptchaApi,loginApi } from '../../api/auth/index'
import router from '@/router';

const userStore = useUserStore()

const loginForm = reactive({
  username: '',
  password: '',
  verifyKey: '',
  verifyCode: '',
})
let loading = ref(false)
let captchaImg = ref();
const formRef = ref()

onMounted(() => {
  getCaptcha()
})

const rules = reactive<FormRules>({
  username: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  password: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
  ],

})

function getCaptcha() {
  const captchaKey = getCaptchaKey()
  loginForm.verifyKey = captchaKey
  getCaptchaApi(captchaKey)
    .then(res => {
      captchaImg.value = res.data.image
      console.log(captchaImg)
    }).catch((error) => {
    ElMessage.error(error)
  })
}
/**
 *  获取验证码
 */
function getCaptchaKey() {
  const captchaKey = Math.random()
    .toString(36)
    .substring(2)
  return captchaKey
}

function handleLogin() {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      loading.value = true;
      ElMessage({
        message: 'Congrats, this is a success message.',
        type: 'success',
      })
      userStore
        .login(loginForm)
        .then(() => {
          router.push('/dashboard');
          loading.value = false;
        })
        .catch(() => {
          loading.value = false;
        });
    } else {
      return false;
    }
  });
}

// async function handleLogin(formEl: FormInstance | undefined) {
//   if (!formEl) return
//   loading.value = true
//   await formEl.validate((valid, fields) => {
//     if (valid) {
//       loginApi(loginForm)
//         .then(res => {
//           ElMessage({
//             message: 'Congrats, this is a success message.',
//             type: 'success',
//           })
//           userStore
//             .login(loginForm)
//             .then(() => {
//               // router.push({ path: state.redirect || '/', query: state.otherQuery });
//               loading.value = false;
//             })
//             .catch(() => {
//               loading.value = false;
//             });
//         })
//     } else {
//       console.log('error submit!', fields)
//     }
//   })
// }





</script>

<style lang="scss">
$bg: #283443;
$light_gray: #fff;
$cursor: #fff;

.login-container {
  background-color: $bg;
  min-height: 100%;
  width: 100%;
  background-size: cover;
  overflow: hidden;
  .login-first-title {
    position: absolute;
    width: 100%;
    font-size: 38px;
    color: white;
    margin-top: 140px;
    text-align: center;
  }
  .login-form {
    position: relative;
    width: 520px;
    max-width: 100%;
    padding: 155px 35px 0;
    margin: 0 auto;
    overflow: hidden;

    margin-top: 6% !important;
  }
  .title-container {
    position: relative;
    .title {
      font-size: 26px;
      color: #eee;
      margin: 0px auto;
      text-align: center;
      font-weight: bold;
    }
  }
  .title {
    font-size: 26px;
    color: #eee;
    margin: 0px auto;
    text-align: center;
    font-weight: bold;
  }
  .el-card__header {
    background-color: #0988de;
  }
  .el-card {
    border: 0px solid #ebeef5 !important;
  }
  .card-header {
    font-size: 26px;
    color: #eee;
    margin: 0px auto;
    text-align: center;
    font-weight: bold;
  }
  /*.el-card__header {*/
  /*  padding: 0px;*/
  /*}*/
  /*.el-card {*/
  /*  border: 0px solid #EBEEF5 !important;*/
  /*}*/
  .captcha-img {
    float: left;
    margin-left: 20px;
    border-radius: 4px;
    height: 40px;
    line-height: 49px;
  }
  .login-button {
    width: 100%;
    margin-bottom: 10px;
  }
}
</style>
